<template>
    <div class="page flex-col">
        <div class="currency-info">
            <div class="info flex">
                <img src="@/assets/usdt.png" alt="">
                <p class="text">USDT</p>
            </div>
            <div class="amount">
                <p class="moeny">135.19</p>
                <p class="gross">$135.28</p>
            </div>

        </div>

        <!-- 付款  转账 兑换-->
        <div class="btns-container">
            <div class="btn-items">
                <div class="img">
                    <img src="@/assets/shang.png" alt="">
                </div>
                <span>发送</span>
            </div>
            <div class="btn-items">
                <div class="img">
                    <img src="@/assets/xia.png" alt="">
                </div>
                <span>接收</span>
            </div>
            <div class="btn-items">
                <div class="img">
                    <img src="@/assets/exchange.png" alt="">
                </div>
                <span>兑换</span>
            </div>
        </div>


        <div class="trading-history">
            <p class="title">交易历史</p>
            <div class="list-container">
                <div class="item-container" v-for="(item, index) in list" :key="index">
                    <div class="img">
                        <img :src="getImage('../assets/' + (item.type == 1 ? 'shang.png' : item.type == 2 ? 'xia.png' : 'exchange.png'))"
                        alt="">
                    </div>
                    <!-- <img src="@/assets/visa 3.png" alt=""> -->
                    <div class="item-info">
                        <div class="info-text">
                            <p class="title">{{ item.status }}</p>
                            <p class="desc">{{ item.desc }}</p>
                            <p class="time">2024/11/11</p>
                        </div>
                        <div class="item-amount">
                            <p class="moeny">{{ item.moeny }} {{ item.title }}</p>
                            <p class="" style="font-size: 15px;" :style="'color:'+(index == 0?'#D19310':'green')">{{ index == 0?'确认中':'已确认' }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="group_5 flex-row bottom-nav">
            <div class="image-text_3 flex-col">
                <img class="image_4" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPng55cc9c0cbfb4462b897a76df856253466e1633bd8deae05c65b40ffc6688e737" />
                <span class="text-group_6" style="color: #D19310;">账户</span>
            </div>

            <div class="image-text_5 flex-col">
                <img class="image_5" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPng8699fca86f2980dab24429de2bb6788c7f5c9d342ca4fa4f1fb747eb19643cea" />
                <span class="text-group_8">交易</span>
            </div>
            <div class="image-text_7 flex-col">
                <img class="thumbnail_7" referrerpolicy="no-referrer"
                    src="https://lanhu-oss.lanhuapp.com/SketchPngf93c6fd8b0580699d12423a39337d5444867cb15449db61d176fdb1bfc8828d3" />
                <span class="text-group_10">设置</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [{
                type: 1,
                title: 'USDT',
                desc: 'TWyg1c...VYQX',
                time: '11-10 05:45',
                moeny: '-100',
                status: '发送',
                balance: '9,600.000000'
            },
            {
                type: 2,
                title: 'USDT',
                desc: 'TVegUx..5WEJ',
                time: '11-05 20:45',
                moeny: '-100',
                status: '接收',
                balance: '9,700.000000'
            },


            {
                type: 1,
                title: 'USDT',
                desc: 'TVegUx..5WEJ',
                time: '11-02 18:45',
                moeny: '-200',
                status: '发送',
                balance: '9,800.000000'
            },
            {
                type: 3,
                title: 'USDT',
                desc: 'TghdDx..DFEJ',
                time: '11-01 05:45',
                moeny: '-1,000',
                status: '兑换',
                balance: '100'
            }
            ]
        };
    },
    methods: {
        getImage(imageName) {

            return new URL(imageName, import.meta.url).href;
        }
    },
    created() {
        document.title = "钱包"
    }
};
</script>
<style src="./walletcss/common.css" />
<style src="./walletcss/index.css" />

<style lang="less" scoped>
.page {
    background: #fff;
    padding-bottom: 60px;
}

.group_2 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    left: 0;
    top: unset;
    padding-left: 0;
    padding-right: 0;

    // height: 60px;
    // background: #fff;
    // border-top: 1px solid #eee;
    .flex-col {
        margin-left: 0;
        flex: 1;
        text-align: center;
        display: flex;
        align-items: center;
    }
}

.currency-info {
    padding: 30px 30px 15px 30px;

    .info {
        align-items: center;
        justify-content: center;

        img {
            width: 40px;
            height: auto;
            margin-right: 10px;
        }

        .text {
            font-size: 22px;
        }
    }

    .amount {
        margin: 30px 0 10px 0;

        .moeny {
            font-size: 40px;
            font-weight: bold;
            color: #000;
        }

        .gross {
            font-size: 20px;
            color: #666;
        }
    }
}

.trading-history {
    border-top: 1px solid #ccc;
    padding: 15px 30px;

    &>.title {
        font-size: 18px;
        margin-bottom: 20px;
    }

    .list-container {
        background: #fff;
        border-radius: 12px;
        padding-bottom: 15px;

        .time {
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
        }

        .box_2 {
            margin: 0;
        }

        .group_1 {
            padding: 15px;
        }

        .item-container {
            margin-top: 15px;
            display: flex;
            align-items: flex-start;

            &:last-child {
                .item-info {
                    border: 0;
                }
            }

            .img {
                width: 30px;
                height: 30px;
                background: #f1f1f1;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                margin-right: 10px;

                img {
                    width: 15px;
                }
            }

            .item-info {
                flex: 1;
                padding-bottom: 5px;
                display: flex;
                justify-content: space-between;

                .info-text {
                    .title {
                        margin-top: -1px;
                        // line-height: 25px;
                        font-size: 15px;
                        color: #242326;
                        // font-weight: bold;
                    }

                    .desc {
                        line-height: 18px;
                        color: #ccc;
                        font-size: 13px;
                    }

                    .time {
                        line-height: 18px;
                        color: #ccc;
                        font-size: 12px;
                    }
                }

                .item-amount {
                    // padding-right: 15px;
                    text-align: right;

                    .moeny {
                        // font-weight: bold;
                        font-size: 20px;
                    }

                    .status {
                        font-size: 13px;
                        color: #ccc;
                    }

                    .balance {
                        color: #ccc;
                        font-size: 13px;
                    }
                }
            }
        }
    }
}

.group_2.flex-col {
    padding-bottom: 0;
    overflow: hidden;
    margin-bottom: 30px;

    .text-group_2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0 15px;
    }

    .currency-icon {
        width: 48px;
        height: auto;
    }

    .text_5 {
        margin: 0;
        margin-top: 5px;
        padding: 0 15px;
        width: 78px;
        font-size: 15px;
        text-align: center;
        display: inline-block;
    }

    .image_2 {
        border-top: 2px solid #f2f2f2;
        width: 100%;
        margin-top: 35px;
        padding: 0 15px;
        font-size: 20px;
        background: #fff0d3;
        height: 50px;
        line-height: 50px;
    }
}

.btns-container {
    padding: 15px 30px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;

    .btn-items {
        // height: 30px;
        font-size: 17px;
        line-height: 30px;
        display: flex;
        color: #000;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;

        .img {
            width: 40px;
            height: 40px;
            background: #f1f1f1;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;

            img {
                width: 20px;
                height: auto;
            }

            margin-bottom: 5px;
        }

        span {
            display: block;
            width: 100%;
            text-align: center;
        }
    }
}
</style>